<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","400px");
		
		var cfg = {SearchMode:smLazyLoad, Page:10, MergeSheet:msNone, PrevColumnMergeMode:0};
		var headers = [
			{Text:"신청인|신청일자|결재여부|신청금액|근태기간|근태기간|시간|시간", Align:"Center"}
			,{Text:"신청인|신청일자|결재여부|신청금액|시작일|종료일|시작|종료", Align:"Center"}
		];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Text",Width:80,ColMerge:1},
			{Type:"Date",Width:100,Format:"Ymd",ColMerge:1,Align:"Center"},
			{Type:"CheckBox",Width:80,SaveName:"A",ColMerge:0},
			{Type:"AutoSum",Width:85,SaveName:"B",Format:"Integer",ColMerge:0},
			{Type:"Date",Width:100,SaveName:"C",Format:"Ymd",Align:"Center",ColMerge:0},
			{Type:"Date",Width:100,SaveName:"D",Format:"Ymd",Align:"Center",ColMerge:0},
			{Type:"Date",Width:100,Format:"Hm",Align:"Center"},
			{Type:"Date",Width:100,Format:"Hm",Align:"Center"}
		];

		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);
		
		mySheet.FitColWidth();
		
		doAction('search');
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch(sAction) {
			case "search":		//조회
				mySheet.DoSearch("../data/merge_data.xml");
				break;
			case "reload":
				mySheet.RemoveAll();
				break;
		}
	}

	function setMerge(str){
		mySheet.SetMergeSheet(eval(str));
		doAction('search');
	}
</script>
<title>머지 영역 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">머지 영역 예제</div>
	<div id="desc">
		<b>Merge</b><br>
		html의 ColSpan, RowSpan과 같이 세로 또는 가로로 병합하는 기능이다. 기본적으로 세로로 같은 데이터가 있을 때 병합이 된다. 이 기능을 이용하기 위해서는 몇가지 규칙이 있다.<br>
		
		1. SetConfig 함수에서 MergeSheet의 종류를 결정한다.(MergeSheet의 종류는 도움말 참조) <br>
		      &nbsp;&nbsp;&nbsp; 예) mySheet.SetConfig({<b>MergeSheet : msPrevColumnMerge</b>})<br><br>
		2. 컬럼의 타입 지정 부분에서 머지할 컬럼에 ColMerge 속성을 부여 한다.<br>
		&nbsp;&nbsp;&nbsp; 예) {Type:"Text",Width:100,Format:"Hm",Align:"Center",<b>ColMerge:0</b>} ColMerge를 설정하지 않으면 default는 1이다<br>
		<br>
		
		
		<br>
		시트 초기화시 아래와 같이 설정할 수 있다.
		<table border="1" style="border-spacing: 2px; border-style: none; border-color: #CCCCCC;">
			<tr>
				<td>
					var cfg = {SearchMode:smLazyLoad, Page:10, <u><b>MergeSheet:msHeaderOnly</b></u>, <u><b>PrevColumnMergeMode:0</b></u>};<br>
					mySheet.SetConfig(cfg);<br>
					
					var cols = [<br>

						{Type:"Status",Width:60,  SaveName:"sStatus", Align:"Center",<u><b>ColMerge:0</b></u>},<br>
						{Type:"Text",  Width:100, SaveName:"JOB",     Align:"Center",<u><b>ColMerge:1</b></u>},<br>
						{Type:"Text",  Width:150, SaveName:"ENAME",   Align:""},<br>
						
						];<br>
						var headers = [ {Text:"상태|직원정보|이름", Align:" Center"} ];<br>

						mySheet.InitHeaders(headers);<br>
						
						mySheet.InitColumns(cols);<br>
					
				</td>
			</tr>
		</table>
		가로로 머지 하는 기능은 DataRowMerge나 RowMerge 함수를 설정하면 된다.<br>
		<br>
	</div>

	<div id="functionArea">
		<span>
			<input type="button" value="전체머지없음" onclick="setMerge('msNone')">
			<input type="button" value="헤더만머지" onclick="setMerge('msHeaderOnly')">
			<input type="button" value="전체머지가능" onclick="setMerge('msAll')">
			<input type="button" value="앞컬럼기준머지" onclick="setMerge('msHeaderOnly + msPrevColumnMerge')">
			<input type="button" value="기준컬럼머지" onclick="setMerge('msBaseColumnMerge +msHeaderOnly')">
		</span>
	</div>
	
	<div id="viewArea">
	</div>
</div>
</body>
</html>